<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pwd-strength{
            width:170px;
            height:20px;
            margin-left:50px;
            margin-top:5px;
            background-color: #eee;
            color:white;
            font-size:14px;
            position: relative;
        }
        .pwd-strength-bar{
            height:100%;
            width:0;
            transition: all .4s linear
        }
        .pwd-strength-text{
            width:100%;
            position:absolute;
            left:0;
            top:0;
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        .pwd-strength-text>span{
            display: block;
            width: 55px;
            height:20px;
            border-right:2px solid white;
        }
    </style>
</head>
<body>
    <form action="#">
        <label>密码：</label><input id="pwd" type="text">
        <div class="pwd-strength">
            <div class="pwd-strength-bar"></div>
            <div class="pwd-strength-text">
                <span>弱</span>
                <span>中</span>
                <span>强</span>
            </div>
        </div>
    </form>
    <script>
        let pwd = document.getElementById("pwd");
        let pwdBar = document.querySelector(".pwd-strength-bar");
        pwd.oninput = function(){
            let value = this.value;
            let weight = 0;
            if(value.length >= 6 && value.length <10){
                weight++;
            }
            if(value.length >= 10 && value.length < 20){
                weight += 2;
            }
            if(value.length >= 20){
                weight += 4;
            }
            if(value.search(/\d/) >= 0){
                weight++;
            }
            if(value.search(/[a-z]/) >= 0){
                weight++;
            }
            if(value.search(/[A-Z]/) >= 0){
                weight++;
            }
            if(value.search(/[^\da-zA-Z]/) >= 0){
                weight++;
            }
            
            if(weight == 2){
                pwdBar.style.width = "55px";
                pwdBar.style.backgroundColor = "#f76120";
            }else if(weight > 2 && weight <= 4){
                pwdBar.style.width = "112px";
                pwdBar.style.backgroundColor = "#ff8900";
            }else if(weight > 4){
                pwdBar.style.width = "169px";
                pwdBar.style.backgroundColor = "#5bab3c";
            }else{
                pwdBar.style.width = "";
                pwdBar.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>